<template>
    <div>
        <div class="top">
            <image :src="viewerInfo.headImg" mode="" />
            <div class="user">
                <p>{{viewerInfo.userName}}</p>
                <span>看过我 <em>{{totalViewCnt}}</em> 次</span>
            </div>
            <div class="copy" @click="copyNickname(viewerInfo.userName)">
                <i class="mar-r10 icon-fuzhi1"></i>
                复制昵称
            </div>
        </div>
        <div class="tabs">
            <div class="level_1 flex">
                <div class="flex-1">
                    <div v-if="showSubAvator" class="sub_avator">
                        <image :src="viewerInfo.headImg" mode="" />
                        <p>{{viewerInfo.userName}}</p>
                    </div>
                </div>
                <p :class="{active: levelType == '1'}" @click="levelType = '1'">详细信息</p>
                <p :class="{active: levelType == '2'}" @click="levelType = '2'">看我记录</p>
            </div>
            <div class="navs" v-if="levelType == '2'">
                <p :class="{active: i.value == viewTypeStr}" @click="viewTypeChange(i)" v-for="(i, idx) in viewTypeList" :key="idx">{{i.label}}</p>
            </div>
        </div>
        <div class="user_info_detail" v-if="levelType == '1'">
            <div class="title">
                <p>基本信息</p>
                <!-- <span>编辑</span> -->
            </div>
            <div class="info_box">
                <div class="info_item"> <span>昵称</span> <p>{{viewerInfo.userName}}</p> </div>
                <div class="info_item"> <span>手机</span> <p>{{viewerInfo.userPhone}}</p> </div>
                <div class="info_item"> <span>年龄</span> <p>{{viewerInfo.age}}</p> </div>
                <div class="info_item"> <span>公司</span> <p>{{viewerInfo.company}}</p> </div>
                <div class="info_item"> <span>email</span> <p>{{viewerInfo.email}}</p> </div>
                <div class="info_item"> <span>地址</span> <p>{{viewerInfo.province || ""}}{{viewerInfo.city || ""}}{{viewerInfo.address || ""}}</p> </div>
            </div>
        </div>
        <div class="content" v-if="levelType == '2'">
            <div class="line-item" v-for="(item, index) in list" :key="index">
                <div class="date"> {{item.formatCreateTime}}</div>
                <div class="box">
                    <div class="box-item">
                        <p class="title" v-if="item.viewType == '1' || item.viewType == '7'">
                            <template v-if="item.dynamicType == '00'">查看文章</template>
                            <template v-if="item.dynamicType == '01'">浏览视频</template>
                        </p>
                        <p class="title" v-if="item.viewType == '8' || item.viewType == '9'">点击广告</p>
                        <div class="artice">
                            <p>{{item.opName}}</p>
                            <image :src="item.opPic" mode="aspectFill"></image>
                        </div>
                        <div class="tip">
                            <span v-if="item.viewType == '1' || item.viewType == '7'">
                                <template v-if="item.dynamicType == '00'">
                                    阅读 {{item.stayTime}}
                                </template>
                                <template v-if="item.dynamicType == '01'">
                                    浏览 {{item.stayTime}} {{item.timeStr ? `(${+(item._stayTime / item.timeStr * 100).toFixed(2)}%)` : '' }}
                                </template>
                            </span>
                            <span class="overflow" v-if="item.viewType == '8' || item.viewType == '9'">{{item.advertDynamicTitle}}</span>
                            <span class="flex-shrink mar-l30">来源：{{item.opFrom}}</span>
                        </div>
                    </div>
                    <div class="source_user">
                        <div v-for="(i, idx) in item.shareLinks" :key="idx">
                            <div class="user_item">
                                <div class="img">
                                    <image :src="i.headImg" mode="" />
                                </div>
                                <p>{{idx == 0 ? '我' : i.userName}}</p>
                            </div>
                            <i v-if="idx < (item.shareLinks.length - 1)" class="icon-arrow-right fs22 color-ccc"></i>
                        </div>
                    </div>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>
    </div>
</template>

<script>
import { getUserViewHisList, getViewerTotal } from '@/request/user'
import { mapState } from 'vuex'
import { timestampToLocalDayPlus, timestampToCountdown } from '@/utils/functions'
export default {
    data() {
        return {
            topElHeight: 0,
            showSubAvator: false,
            levelType: '2', //1详细信息 ，2看我记录

            viewerId: '',
            totalViewCnt: '0',
            viewerInfo: {},

            viewTypeStr: '1,7,8,9',
            viewTypeList: [
                { value: '1,7,8,9', label: '全部' },
                { value: '1,7', label: '文章/视频' },
                { value: '8,9', label: '广告' },
                // { value: '8', label: '名片' },
            ],
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onPageScroll(e) {
        this.showSubAvator = e.scrollTop > this.topElHeight
    },
    onReachBottom() {
        this.onInfinite()
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
        
    },
    onLoad({ viewerId }) {
        this.viewerId = viewerId
        this.$nextTick(() => {
            this.$queryViewInfo('.top').then(rst => {
                this.topElHeight = rst.height;
            })
        })
        this.onRefresh()
        this.getDetail()
    },
    methods: {
        viewTypeChange(i){
            this.viewTypeStr = i.value
            this.onRefresh()
        },
        getDetail() {
            getViewerTotal({
                viewerId: this.viewerId
            }).then(res => {
                this.totalViewCnt = res.data.cnt
                this.viewerInfo = res.data.info || {}
            })
        },
        getHistory(complete) {
            getUserViewHisList({
                viewTypeStr: this.viewTypeStr,
                viewerId: this.viewerId,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                res.data.list.forEach(item => {
                    item.formatCreateTime = item.createTime.dateFormat('MM月dd日 hh:mm')
                    item.formatTime = timestampToLocalDayPlus(item.createTime)
                    item._stayTime = (item.leaveTime.toDate() - item.createTime.toDate()) / 1000
                    item.stayTime = timestampToCountdown( item.leaveTime.toDate() - item.createTime.toDate() , 'mm分ss秒')
                    item.stayTime = item.stayTime.replace('00分', '')
                    item.stayTime = item.stayTime.replace('00秒', '0秒')
                })
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getHistory(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getHistory(() => {
                this.scroll.loading = false
            })
        },
        copyNickname(data) {
            uni.setClipboardData({
                data,
                success: () => {
                    this.$interact.toast('复制成功')
                }
            })
        }
    }

}
</script>

<style lang="less" scoped>
.top{
    width: 100%;
    height: 150rpx;
    background: #fff;
    padding: 0 30rpx 10rpx;
    display: flex;
    align-items: flex-end;
    image{
        width: 110rpx;
        height: 110rpx;
        border-radius: 55rpx;
        flex-shrink: 0;
    }
    .user{
        flex: 1;
        padding-left: 26rpx;
        height: 110rpx;
        position: relative;
        .align(h-space-around, column);
        p{
            font-size: 36rpx;
            font-weight: bold;
        }
    }
    .copy{
        position: absolute;
        right: 0;
        top: 50rpx;
        width: 180rpx;
        height: 60rpx;
        .align(center);
        color: #fff;
        border-radius: 30rpx 0 0 30rpx;
        font-size: 26rpx;
        background-color: @mainColor;
        box-shadow: 0 0 10rpx 0 rgba(224,46,66,.3);
    }
}
.tabs{
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    .level_1{
        height: 100rpx;
        border-bottom: 1px solid #e5e5e5;
        p{
            height: 100%;
            line-height: 100rpx;
            font-size: 34rpx;
            padding: 0 20rpx;
            font-weight: 700;
            &.active{
                color: #333;
                position: relative;
                color: @mainColor;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 30%;
                    height: 8rpx;
                    background: @mainColor;
                }
            }
        }

        .sub_avator {
            width: 100%;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            image{
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
            }
            p{
                flex: 1;
                width: 1px;
                font-size: 30rpx;
                .overflow();
            }
        }
    }
    .navs{
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        overflow: auto;
        padding: 0 20rpx;
        p{
            display: flex;
            align-items: center;
            justify-content: center;
            // width: 120rpx;
            min-width: 120rpx;
            padding: 0 20rpx;
            height: 64rpx;
            background: #f2f2f2;
            border-radius: 6rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #333;
            margin-right: 20rpx;
            flex-shrink: 0;
            &.active{
                background: #ffeeef;
                color: @mainColor;
                font-weight: bolder;
            }
        }
    }
}

.user_info_detail{
    width: 100%;
    padding: 20rpx 30rpx;
    .title{
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        justify-content: space-between;
        margin: 15rpx 0;
        padding: 0 10rpx;
        p{
            font-size: 38rpx;
            font-weight: bold;
        }
        span{
            color: #576b95;
            font-size: 28rpx;
        }
    }
    .info_box{
        width: 100%;
        min-height: 500rpx;
        border-radius: 15rpx;
        background: #fff;
        padding: 20rpx 30rpx;
        .info_item{
            display: flex;
            align-items: center;
            height: 90rpx;
            font-size: 32rpx;
            span{
                width: 150rpx;
                color: #999;
                margin-right: 20rpx;
            }
            p{
                flex: 1;
            }
        }
    }
}

.content{
    padding: 20rpx 30rpx 40rpx 40rpx;
    position: relative;
    &::before{
        content: "";
        position: absolute;
        left: 20rpx;
        height: 100%;
        width: 1px;
        background: #ddd;
    }
    .line-item{
        padding-bottom: 40rpx;
        .date{
            line-height: 40rpx;
            height: 40rpx;
            font-size: 28rpx;
            color: #666;
            margin-bottom: 20rpx;
            position: relative;
            &::before{
                content: "";
                position: absolute;
                left: -26rpx;
                top: 14rpx;
                width: 14rpx;
                height: 14rpx;
                border-radius: 50%;
                background: @mainColor;
            }
        }
        .box{
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 10rpx;
            padding: 0 30rpx;
            .box-item{
                padding: 30rpx 0 40rpx 0;
                border-bottom: 1px solid #ddd;
                .title{
                    font-size: 28rpx;
                    font-weight: bold;
                    margin-bottom: 30rpx;
                }
                .artice{
                    width: 580rpx;
                    height: 180rpx;
                    background: #f7f7f7;
                    border: 1px solid #ddd;
                    border-radius: 16rpx;
                    margin-left: 40rpx;
                    margin-bottom: 40rpx;
                    position: relative;
                    display: flex;
                    align-items: center;
                    padding: 0 20rpx;
                    p{
                        flex: 1;
                        height: 150rpx;
                        line-height: 48rpx;
                        margin-right: 10rpx;
                        .overflow(3);
                    }
                    image{
                        flex-shrink: 0;
                        width: 180rpx;
                        height: 140rpx;
                    }
                    &::after{
                        content: "";
                        position: absolute;
                        left: -30rpx;
                        top: -20rpx;
                        width: 1rpx;
                        height: calc(100% + 40rpx);
                        border-radius: 50%;
                        background: #ddd;
                    }
                    
                }
                .tip{
                    height: 40rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 28rpx;
                    span{
                        &:first-child{
                            flex: 1;
                            width: 10rpx;
                            .overflow();
                        }
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
    .source_user{
        display: flex;
        padding: 40rpx 0;
        flex-wrap: wrap;
        >div{
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
        }
        .user_item{
            width: 134rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .img{
                width: 72rpx;
                height: 72rpx;
                border-radius: 50%;
                .align(center);
                &.border{
                    border: 1rpx solid @mainColor;
                }
                image{
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                }
            }
            p{
                font-size: 24rpx;
                text-align: center;
                color: #666;
                margin-top: 10rpx;
                width: 100%;
                .overflow();
            }
        }
    }
    
}
</style>